<template>
  <q-input v-if="!byLine" outlined dense ref="selectInput" @input="changeVal"
           @blur="inputBlur()" v-model.trim="searchVal"
           clearable
           clear-icon="close"
           v-longth="{ isLongth, width: longWidth }"
           @focus="$emit('focus')"
           @clear="clearSearchVal()"
           :placeholder="placeholder" class="quik-search" bg-color="white">
    <template v-slot:prepend>
      <q-icon name="iconfont icontubiao-21" style="color: #999;font-size: 18px" />
    </template>
<!--    <template v-slot:append>-->
<!--      <q-icon name="close" v-if="searchVal.length > 0" @click="clearSearchVal()" class="cursor-pointer" />-->
<!--    </template>-->
    <q-menu v-model="show" fit no-focus no-refocus :no-parent-event="true">
      <q-list style="min-width: 100px"  dense>
        <q-item clickable
                v-for="(item,index) in list" :key="index"
                :active="indexAct===index"
                v-stat="{id:item.statId?item.statId:'', name:'按照'+item.name+'搜索'}"
                @click="setAct(index)">
          <q-item-section>按照{{item.name}}搜索</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-input>
  <q-input v-else outlined dense ref="selectInput2" @input="changeVal"
           v-model.trim="searchVal2"
           clearable
           clear-icon="close"
           v-longth="{ isLongth, width: longWidth }"
           @clear="clearSearchVal2()"
           @blur="$emit('blur')"
           @focus="$emit('focus')"
           @keyup.enter="search"
           placeholder="请输入调度线名称" class="quik-search" bg-color="white">
    <template v-slot:prepend>
      <q-icon name="iconfont icontubiao-21" style="color: #999;font-size: 18px" />
    </template>
  </q-input>
</template>

<script>
export default {
  name: 'select-tree',
  props: {
    // 数据列表
    list: {
      type: Array
    },
    isLongth: {
      type: Boolean,
      default: true
    },
    byLine: {
      type: Boolean,
      default: false
    },
    longWidth: {
      type: String,
      default: '300px'
    }
  },
  data () {
    return {
      show: false, // menu的显示与隐藏
      searchVal: '', // 搜索值
      searchVal2: '',
      indexAct: -1 // 选中的数据索引
    }
  },
  computed: {
    placeholder () {
      const list = this.list.map(item => {
        return item.name
      })
      return `${list.join('/')}`
    }
  },
  methods: {
    // focusInput () {
    //   console.log('miaomiaoying')
    //   this.show = true
    // },
    inputBlur () {
      this.$emit('blur')
      this.show = false
    },
    // 清除搜索值
    clearSearchVal () {
      this.searchVal = ''
      this.$emit('clearSearchVal')
      setTimeout(() => {
        this.$refs.selectInput.blur()
      }, 0)
    },
    clearSearchVal2 () {
      this.searchVal2 = ''
      this.$emit('clearSearchVal')
      setTimeout(() => {
        this.$refs.selectInput2.blur()
      }, 0)
    },
    clearValue () {
      this.searchVal = ''
      setTimeout(() => {
        this.$refs.selectInput.blur()
      }, 0)
    },
    // 设置搜索值
    setVal (searchVal, indexAct) {
      this.searchVal = searchVal
      this.indexAct = indexAct
      this.$emit('search', this.list[this.indexAct] ? this.list[this.indexAct] : { id: null }, searchVal)
    },
    // 判断搜索值是否为空，为空时清除父元素搜索值
    changeVal (event) {
      if (event !== null && event !== undefined && event !== '') {
        this.show = true
      } else {
        this.show = false
      }
      this.$emit('changeVal', this.searchVal)
    },
    // 设置选中项,并搜索
    setAct (index) {
      if (this.searchVal.length === 0) {
        return false
      }
      this.indexAct = index
      this.show = false
      // this.$refs.selectInput.blur()
      this.$emit('search', this.list[this.indexAct], this.searchVal)
    },
    search () {
      this.$emit('search2', this.searchVal2)
    }
  }
}
</script>

<style scoped lang="stylus">
</style>
